<template>
    <div>
        <ul class="clearfix b-g-f remind-box">
            <li class="clearfix remind-box-li" :class="{'remind-click' : index === active}" v-for="(item,index) in days" :key="index" @click="active=index,numData = ''">
                {{item}}
            </li>
            <li class="clearfix remind-box-li" @click="show = !show,active = -1" :class="{'remind-click' : active == -1}">
                自定义
                <input class="remind-box-last" type="text" v-model="numData" disabled>
            </li>
        </ul>
        <ul class="clearfix b-g-f remind-box">
            <li class="clearfix remind-box-li b-g-i-n">
                预约开关
                <div class="remind-switch">
                    <van-switch v-model="isRemind" active-color="#5CA1EE" inactive-color="#f5f5f5" size="24px" />
                </div>
                
            </li>
        </ul>
        <van-popup v-model="show" position="bottom">
            <van-picker :default-index="defaultIndex" show-toolbar :columns="columns" @cancel="onCancel" @confirm="onConfirm" />
        </van-popup>
        <span class="liji-yuyue" @click="setVisitTime()">立即预约</span>
    </div>
</template>
<script>
import { Toast } from 'vant';
export default {
    data(){
        return{
            active:'',
            isRemind:false,
            show:false,
            numData:'',
            remind:{},
            defaultIndex:0,
            days:['3天回访','7天回访','15天回访'],
            columns: ['1天','2天','3天','4天','5天','6天','7天','8天','9天','10天','11天','12天','13天','14天','15天','16天','17天','18天','19天',
                        '20天','21天','22天','23天','24天','25天','26天','27天','28天','29天','30天']
        }
    },
    components:{},
    mounted(){
        this.getVisitTime()
    },
    methods: {
        // 获取预约时间
        getVisitTime(){
            this.$api.dietitian.getVisitTime({id:this.$route.query.id}).then(resp=>{
                if(resp.code == 1){
                    this.remind = resp.data
                    if(resp.data.is_preview == 1){
                        this.isRemind = true
                    }else{
                        this.isRemind = false
                    }
                    if(resp.data.preview_days == 3){
                        this.active = 0
                    }else if(resp.data.preview_days == 7){
                        this.active = 1
                    }else if(resp.data.preview_days == 15){
                        this.active = 2
                    }else{
                        this.active = -1
                        this.defaultIndex = resp.data.preview_days - 1
                        this.numData = this.columns[resp.data.preview_days - 1]
                    }
                }
            })
        },
        // 设置预约时间
        setVisitTime(){
            let parmes = {
                id:this.$route.query.id,
            }
            if(this.isRemind){
                parmes.is_preview = 1
            }else{
                parmes.is_preview = 2
            }
            if(this.active == 0){
                parmes.preview_days = 3
            }else if(this.active == 1){
                parmes.preview_days = 7
            }else if(this.active == 2){
                parmes.preview_days = 15
            }else{
                parmes.preview_days = this.numData.substr(0, 1)
            }
            this.$api.dietitian.setVisitTime(parmes).then(resp=>{
                if(resp.code == 1){
                    Toast('设置成功')
                    this.$router.back(-1)
                }
            })
        },
        // 取消
        onCancel(){
            this.show = !this.show
        },
        // 确认
        onConfirm(value, index){
            this.numData = value
            this.show = !this.show
        },
    }
}
</script>

<style lang="less" scoped>
.remind-box{
    padding: 0px 40px;
    margin-top: 30px;
    .remind-box-li{
        border-bottom:solid 2px #f5f5f5;
        height: 120px;
        background: url('../../../static/img/yuyue.png') no-repeat left center;
        background-size: 50px;
        line-height: 120px;
        font-size: 40px;
        padding-left: 80px;
        .remind-box-last{
            border:none;
            float: right;
            height: 110px;
            text-align: right;
            line-height: 110px;
            color: #5CA1EE;
        }
    }
    .b-g-i-n{
        background:none !important;
        padding-left:0px;
        .remind-switch{
            float: right;
            .van-switch{
                margin-top: 30px;
            }
        }
    }
    .remind-click{
        background: url('../../../static/img/yuyue1.png') no-repeat left center;
        background-size: 50px;
        color: #5CA1EE;
    }
    .remind-box-li:last-child{
        border: none;
    }
}
.liji-yuyue{
    height: 110px;
    width: 80%;
    margin: 100px auto;
    background-color: #5CA1EE;
    color: #fff;
    text-align: center;
    line-height: 110px;
    font-size: 40px;
    display: block;
    border-radius: 20px;
}
</style>

